import React, { FC } from "react"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { QuestionCheckboxStatPropsType } from "./interface"

const StatComponent: FC<QuestionCheckboxStatPropsType> = (props: QuestionCheckboxStatPropsType) => {
    const { stat = [] } = props

    return (
        <div style={{ width: "370px", height: "300px" }}>
            <ResponsiveContainer height="100%" width="100%">
                <BarChart width={370} height={300} data={stat} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
                    {/* 虚线网格 */}
                    <CartesianGrid strokeDasharray="3 3" />
                    {/* 横轴显示的坐标值 */}
                    <XAxis dataKey="name" />
                    {/* 纵轴会自动根据数据显示 */}
                    <YAxis />
                    <Tooltip />
                    {/* <Legend /> */}
                    <Bar dataKey="count" fill="#8884d9" />
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
}

export default StatComponent
